import React, { Component } from 'react'
import Ditel from './ditel/Ditel'

import {NavLink,BrowserRouter,Route,Switch, Redirect, Link} from 'react-router-dom'
export default class Message extends Component {
    state={
        message:[
            {id:"01",title:"111"},
            {id:"02",title:"222"},
            {id:"03",title:"333"},
        ]
    }
    showreplace=(id,title)=>{
     this.props.history.replace(`/home/message/detil/${id}/${title}`)
        //replace跳转+携带search参数
		// this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)

		//replace跳转+携带state参数
		//this.props.history.replace(`/home/message/detail`,{id,title})
    }
    showpush = (id,title)=>{
        this.props.history.push(`/home/message/detil/${id}/${title}`)
        //push跳转+携带search参数
		// this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)

		//push跳转+携带state参数
		//this.props.history.push(`/home/message/detail`,{id,title})
    }
    back = ()=>{
		this.props.history.goBack()
	}

	forward = ()=>{
		this.props.history.goForward()
	}

	go = ()=>{
		this.props.history.go(-2)
	}
    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.message.map((messageobj)=>{
                            return (
                                <li key={messageobj.id}>
                                    {/* params参数 */}
                                    <Link to={`/home/message/detil/${messageobj.id}/${messageobj.title}`}>{messageobj.title}</Link>
                                    {/* search参数 */}
                                    {/* <Link to={`/home/message/detil/?id=${messageobj.id}&title=${messageobj.title}`}>{messageobj.title}</Link> */}
                                    {/* state参数 */}
                                    {/* <Link to={{pathname:'/home/message/detil',state:{id:messageobj.id,title:messageobj.title}}}>{messageobj.title}</Link> */}
                                    <button onClick={()=>this.showpush(messageobj.id,messageobj.title)}>push</button>
                                    <button onClick={()=>this.showreplace(messageobj.id,messageobj.title)}>replace</button>
                                </li>
                            )

                        })
                    }
                  </ul>
                  <hr/>
                  {/* 声明接收params参数 */}
                  <Route path='/home/message/detil/:id/:title' component={Ditel}/>
                  {/* 声明接收search参数不需要接收 */}
                  {/* <Route path='/home/message/detil' component={Ditel}/> */}
                  {/* 声明接收state参数不需要接收 */}
                  {/* <Route path='/home/message/detil' component={Ditel} /> */}
                  <button onClick={this.back}>回退</button>&nbsp;
				  <button onClick={this.forward}>前进</button>&nbsp;
				  <button onClick={this.go}>go</button>
            </div>
        )
    }
}
